<template>
  <div class="container">
    <div class="eval-top" v-if="evaluation.rating">
      <div class="rating">{{evaluation.rating.shop_score.toFixed(1)}}</div>
      <div class="shop-rating">
        <div class="name">商家评分</div>
        <div class="rating-star">
          <Rating :rating="evaluation.rating.shop_score" />
        </div>
      </div>
      <div class="delices">
        <div>味道</div>
        <div>{{evaluation.rating.taste_score.toFixed(1)}}</div>
      </div>
      <div class="delices">
        <div>味道</div>
        <div>{{evaluation.rating.service_score.toFixed(1)}}</div>
      </div>
      <div class="delices">
        <div>味道</div>
        <div>{{evaluation.rating.rider_score.toFixed(1)}}</div>
      </div>

    </div>
    <div class="eval-list">
      <div v-for="(item,index) in evaluation.tags" :key="index" class="div" :class="{'active':item.unsatisfied}" @click="handleTags(item)">
        <span>{{item.name}}</span>
        <span style="margin-left:.1rem;">{{item.count}}</span>
      </div>
    </div>
    <div class="eval-bottom" v-for="item in evaluation.comments" :key="item.order_id">
      <div class="icon-header">
        <img v-if="item.avatar" :src="item.avatar" alt="">
        <img v-else src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F25%2F20200525181147_dzdyx.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643955811&t=4a32d97a6589c51573fc0c10c4892de6">
      </div>
      <div class="contant">
        <div class="title">
          <div>{{item.username}}</div>
          <div>{{item.rated_at}}</div>
        </div>
        <div>
        </div>
        <div>
          <Rating :rating="evaluation.rating.shop_score" />
          <span style="margin-left:0.2rem;" :style="{color: ratingcontent(item.rating).color}">{{ratingcontent(item.rating).txt}}</span>
        </div>
        <div class="reply-content">{{item.reply.content}}</div>
        <div class="order">
          <div v-for="(img,idx) in item.order_images" :key="idx">
            <img :src="img.image_hash" alt="" @click="openImgview(img.image_hash)">
          </div>
        </div>
      </div>
    </div>
    <div class="img-view animate__animated animate__fadeIn animate__faster" v-if="isImgView" @click="isImgView = false">
      <img :src="imgView" alt="">
    </div>
  </div>
</template>
<script>
import Rating from '../../components/Rating.vue'
export default {
  name: 'evaluation',
  data () {
    return {
      evaluation: [],
      imgView: 'https://fuss10.elemecdn.com/e/8c/b0c329ce14c228a7780791dd756ddjpeg.jpeg',
      isImgView: false
    }
  },
  created () {
    this.getData()
  },
  computed: {
  },
  methods: {
    getData () {
      this.$axios("/api/profile/comments").then(res => {
        console.log(res.data);
        this.evaluation = res.data;
      });
    },
    ratingcontent (rating) {
      const content = [
        { txt: "吐槽", color: "rgb(137,159,188)" },
        { txt: "较差", color: "rgb(137, 159, 188)" },
        { txt: "一般", color: "rgb(251, 154, 11)" },
        { txt: "满意", color: "rgb(251, 154, 11)" },
        { txt: "超赞", color: "rgb(255, 96, 0)" }
      ];
      return content[rating - 1];
    },
    handleTags (item) {
      item.unsatisfied = !item.unsatisfied
    },
    openImgview (img) {
      console.log(img);
      this.imgView = img
      this.isImgView = true
    }
  },
  components: {
    Rating
  }
}
</script>
<style  scoped>
.eval-top {
  display: flex;
  height: 2rem;
  background-color: #fff;
  align-items: center;
  text-align: center;
  color: rgb(95, 93, 93);
  font-size: 0.2rem;
  line-height: 0.45rem;
}
.rating {
  flex: 1.5;
  font-size: 1rem;
  color: rgb(245, 92, 21);
}
.shop-rating {
  flex: 1.5;
}
.delices {
  flex: 1;
}
.eval-list {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
  background-color: #fff;
  margin-top: 0.07rem;
}
.eval-list .div {
  width: 18%;
  height: 0.5rem;
  background-color: #e9f3fe;
  margin: 0.1rem 0.2rem;
  padding: 0.1rem;
  color: rgb(87, 84, 84);
  font-size: 0.3rem;
  line-height: 0.5rem;
}
.active {
  background-color: rgb(221, 220, 220) !important;
}
.icon-header {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  overflow: hidden;
}
.icon-header img {
  width: 1rem;
}
.eval-bottom {
  display: flex;
  padding: 0.2rem;
  background-color: #fff;
}
.contant {
  flex: 1;
  font-size: 0.3rem;
}
.eval-bottom .contant {
  padding: 0.2rem 0.3rem;
}
.contant .title {
  display: flex;
  justify-content: space-between;
}
.contant .title div:nth-child(2) {
  color: rgb(141, 139, 139);
}
.order {
  display: flex;
  flex-wrap: wrap;
}
.order img {
  width: 3rem;
  margin-top: 0.2rem;
  margin-right: 0.2rem;
}
.reply-content {
  position: relative;
  background-color: #f1f1f1;
  padding: 0.3rem;
  border-radius: 0.2rem;
  margin-top: 0.25rem;
}
.reply-content::before {
  position: absolute;
  top: -0.3rem;
  left: 1rem;
  content: "";
  display: block;
  width: 0.3rem;
  height: 0.3rem;
  background-color: #f1f1f1;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.img-view {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.767);
  top: 0;
  width: 100%;
  left: 0;
  height: 100%;
  z-index: 9999;
  text-align: center;
}
.img-view img {
  width: 100%;
  margin-top: 50%;
}
</style>
